Vue.component('rx-date-select', {
    model: {
        prop: 'date',
        event: 'change',
    },
    props: {
        date: Date | String,
        size: [String],
    },
    computed: {
        innerDate: {
            get() {
                return this.date
            },
            set(val) {
                this.$emit('change', val)
            },
        },
    },
    template: `<el-date-picker
      :size="size"
      v-model="innerDate"
      type="date"
      placeholder="选择日期">
</el-date-picker>`,
})

Vue.component('rx-range-time', {
    model: {
        prop: 'range',
        event: 'change',
    },
    props: {
        range: Array,
    },
    computed: {
        innerRange: {
            get() {
                return this.range
            },
            set(val) {
                this.$emit('change', val)
            },
        },
    },
    template: `<el-time-picker
              is-range
              v-model="innerRange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
/>
    `,
})


const app = new BasicTableVue({
    data() {
        return {
            api: slogAccessLogApi,
            columns: [
                new TableColumn({width: 30, type: 'selection'}),
                new TableColumn({prop: 'houseName', title: '所在机房'}),
                new TableColumn({prop: 'srcIp', title: '源IP'}),
                new TableColumn({prop: 'srcPort', title: '源端口'}),
                new TableColumn({prop: 'destIp', title: '目的IP'}),
                new TableColumn({prop: 'destPort', title: '目的端口'}),
                new TableColumn({prop: 'transProtocol', title: '协议', formatter: this.protocolFormat}),
                new TableColumn({prop: 'url', title: '网址'}),
                new TableColumn({prop: 'accessTime', title: '访问时间', formatter: TableColumn.datetimeFormat}),
            ],
            houses: [],
            //1：TCP， 2：UDP
            protocolMap: new Map().set(1, 'TCP').set(2, 'UDP'),
            excludeFieldSet: new Set(['timeArray']),
        }
    },
    watch: {
        ['form.timeArray'](val) {
            this.form.accessTimeStart = null;
            this.form.accessTimeEnd = null;
            if (val) {
                let tempTime = rx.DateConstants.dayStart(val[0]) - (this.form.logTime ? rx.dateConstants.dayStart(this.form.logTime) : rx.dateConstants.dayStart(val[0]))
                this.form.accessTimeStart = new Date(val[0] - tempTime)
                this.form.accessTimeEnd = new Date(val[1] - tempTime)
            }
        }
    },
    methods: {
        createForm() {
            return new AccessLog()
        },
        async init() {
            this.houses = await baseHouseInfoApi.selectList();
        },
        protocolFormat(row, column, val, index) {
            return this.protocolMap.get(parseInt(val))
        }
    },
    computed: {
        fieldFormatter() {
            return fieldFormatter
        },
    },
})
